<template>
  <ElDrawer v-model="visible" size="40%">
    <ElForm>
      <ElFormItem label="请假类型">
        <ElSelect v-model="leaveBillDto.leaveType">
          <ElOption label="病假" value="sick"></ElOption>
          <ElOption label="年假" value="annual"></ElOption>
          <ElOption label="事假" value="issue"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="请假时间">
        <ElDatePicker type="datetimerange" v-model="leaveBillDto.timeRange"></ElDatePicker>
      </ElFormItem>
      <ElFormItem label="请假原因">
        <ElInput v-model="leaveBillDto.reason"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton @click="insert()" type="primary">新建请假条</ElButton>
      </ElFormItem>
    </ElForm>
  </ElDrawer>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'LeaveInsert',
  emits: ['postInsert'],
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      visible: false,
      leaveBillDto: {
        leaveType: 'sick',
        // timeStart: '2023-06-08T00:43:50.496Z',
        // timeEnd: '2023-06-09T00:43:50.496Z',
        timeRange: null,
        // timeRange:['2023-06-08','2023-06-09']
        reason: '未知原因'
      }
      // swagger接口结构体 与 前端模型不一致时候
      // 在数据校验完毕 发送axios请求前 进行格式化
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    // show 是一个供外界调用 通过dom方式 直接调用的方法
    show() {
      this.visible = true
    },
    async insert() {
      // 第一步 数据校验
      // 第二步 节流处理
      // 第三步 发送数据 （发送数据前 格式化）
      const d = {
        leaveType: '',
        timeStart: null,
        timeEnd: null,
        reason: ''
      }
      d.leaveType = this.leaveBillDto.leaveType
      d.reason = this.leaveBillDto.reason
      if (!this.leaveBillDto.timeRange) {
        d.timeStart = null
        d.timeEnd = null
      } else {
        d.timeStart = this.leaveBillDto.timeRange[0]
        d.timeEnd = this.leaveBillDto.timeRange[1]
      }
      const res = await axios({
        method: 'post',
        url: '/leave/insert',
        data: d
      })
      //   优化用户体验postInsert
      // queryByCondition 方法需要花费2s完成
      this.$emit('postInsert', 1)
      this.visible = false
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 300px;
}
</style>
